<template>
    <!-- 外层容器 -->
    <el-container class="auto-height">
        <!-- 侧边栏容器 -->
        <el-aside class="auto-width">
            <!-- 菜单栏 -->
            <el-menu
                    :collapse="collapse"
                    active-text-color="#ffd04b"
                    background-color="#ffffff"
                    class="vertical auto-height"
                    default-active="1-1"
                    router
                    text-color="black"
            >
                <!-- 侧边栏标题 -->
                <h1 class="title">
                    <img id="logo_img" class="img " src="../assets/images/logo.jpg">
                    <span id="vertical_title_text">家医后台管理系统</span>
                </h1>

                <!-- 工作台 -->
                <el-menu-item index="/home/workbench">
                    <el-icon>
                        <monitor/>
                    </el-icon>
                    <span>工作台</span>
                </el-menu-item>

                <!-- 签约管理 -->
                <el-sub-menu index="1">
                    <!-- 插槽 -->
                    <template #title>
                        <el-icon>
                            <document/>
                        </el-icon>
                        <span>签约管理</span>
                    </template>
                    <el-menu-item index="/home/pending">
                        <span>待签约管理</span>
                    </el-menu-item>
                    <el-menu-item index="/home/processed">
                        <span>签约记录</span>
                    </el-menu-item>
                </el-sub-menu>

                <!-- 服务管理 -->
                <el-sub-menu index="2">
                    <!-- 插槽 -->
                    <template #title>
                        <el-icon>
                            <bell/>
                        </el-icon>
                        <span>服务管理</span>
                    </template>
                    <el-menu-item index="/home/pending-service-management">
                        <span>待服务管理</span>
                    </el-menu-item>
                    <el-menu-item index="/home/service-record">
                        <span>服务记录</span>
                    </el-menu-item>
                </el-sub-menu>

                <!-- 居民管理 -->
                <el-menu-item index="/home/resident-management">
                    <el-icon>
                        <user/>
                    </el-icon>
                    <span>居民管理</span>
                </el-menu-item>

                <!-- 消息管理 -->
                <el-menu-item index="/home/message-management">
                    <el-icon>
                        <message/>
                    </el-icon>
                    <span>消息管理</span>
                </el-menu-item>

                <!-- 资料管理 -->
                <el-sub-menu index="3">
                    <!-- 插槽 -->
                    <template #title>
                        <el-icon>
                            <folder/>
                        </el-icon>
                        <span>资料管理</span>
                    </template>
                    <el-menu-item index="/home/organizational-management">
                        <span>机构管理</span>
                    </el-menu-item>
                    <el-menu-item index="/home/team-management">
                        <span>团队管理</span>
                    </el-menu-item>
                    <el-menu-item index="/home/doctor-management">
                        <span>医生管理</span>
                    </el-menu-item>
                    <el-menu-item index="/home/service-package-management">
                        <span>服务包管理</span>
                    </el-menu-item>
                    <el-menu-item index="/home/service-item-management">
                        <span>服务项目管理</span>
                    </el-menu-item>
                </el-sub-menu>

                <!-- 数据统计 -->
                <el-sub-menu index="4">
                    <!-- 插槽 -->
                    <template #title>
                        <el-icon>
                            <trend-charts/>
                        </el-icon>
                        <span>数据统计</span>
                    </template>
                    <el-menu-item index="/home/data-overview">
                        <span>数据概况</span>
                    </el-menu-item>
                    <el-menu-item index="/home/contract-performance-statistics">
                        <span>签约业绩统计</span>
                    </el-menu-item>
                    <el-menu-item index="/home/service-performance-statistics">
                        <span>服务业绩统计</span>
                    </el-menu-item>
                </el-sub-menu>

                <!-- 系统设置 -->
                <el-sub-menu index="5">
                    <!-- 插槽 -->
                    <template #title>
                        <el-icon>
                            <setting/>
                        </el-icon>
                        <span>系统设置</span>
                    </template>
                    <el-menu-item index="/home/tag-management">
                        <span>标签管理</span>
                    </el-menu-item>
                    <el-menu-item index="/home/role-management">
                        <span>角色管理</span>
                    </el-menu-item>
                    <el-menu-item index="/home/information-management">
                        <span>资讯管理</span>
                    </el-menu-item>
                    <el-menu-item index="/home/carousel-map-management">
                        <span>轮播图管理</span>
                    </el-menu-item>
                    <el-menu-item index="/home/system-announcement">
                        <span>系统公告</span>
                    </el-menu-item>
                    <el-menu-item index="/home/protocol-management">
                        <span>协议管理</span>
                    </el-menu-item>
                    <el-menu-item index="/home/operation-log">
                        <span>操作日志</span>
                    </el-menu-item>
                </el-sub-menu>


            </el-menu>
        </el-aside>

        <!-- 主要容器 -->
        <el-container>
            <!-- 顶栏容器 -->
            <el-header class="header">
                <!-- 展开侧边栏 -->
                <a
                        v-show="collapse"
                        class="expand-fold"
                        href=""
                        @click.prevent="collapse = !collapse"
                >
                    <el-icon>
                        <expand/>
                    </el-icon>
                </a>
                <!-- 折叠侧边栏 -->
                <a
                        v-show="!collapse"
                        class="expand-fold"
                        href=""
                        @click.prevent="collapse = !collapse"
                >
                    <el-icon>
                        <fold/>
                    </el-icon>
                </a>

                <!-- Dropdown 下拉菜单 -->
                <el-dropdown @command="onHandler">
          <span class="el-dropdown-link">
            用户
            <el-icon><arrow-down/></el-icon>
          </span>
                    <!-- Dropdown 插槽 -->
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="myInformation">我的资料</el-dropdown-item>
                        </el-dropdown-menu>
                        <el-dropdown-menu>
                            <el-dropdown-item command="resetPassword">重置密码</el-dropdown-item>
                        </el-dropdown-menu>
                        <el-dropdown-menu>
                            <el-dropdown-item command="logout">退出系统</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </el-header>

            <!-- 主要区域容器 -->
            <el-main>
                <!-- 路由 -->
                <router-view/>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import {
    ArrowDown,
    Bell,
    Document,
    Expand,
    Fold,
    Folder,
    Message,
    Monitor,
    Setting,
    TrendCharts,
    User
} from "@element-plus/icons-vue";
import {logoutUser} from "@/api/api";
import {ElMessage, ElMessageBox} from "element-plus";
import Session from "@/utils/storage";

export default {
    name: "Home",
    components: {
        User, Fold, Expand, ArrowDown, Monitor, Message, Document, Setting, TrendCharts, Folder, Bell
    },
    data() {
        return {
            collapse: false,
        };
    },
    methods: {
        onHandler(command) {
            if ('logout' === command) {
                ElMessageBox.confirm(
                        '是否确定退出系统',
                        {
                            confirmButtonText: '确认',
                            cancelButtonText: '取消',
                            type: 'warning',
                        }
                ).then(() => {
                    logoutUser().then(res => {
                        if (res.data.code === 200) {
                            Session.remove("token")
                            this.$router.replace("/")
                            ElMessage({
                                type: 'success',
                                message: '退出成功',
                            })
                        }
                    })
                })
            }
        }
    }
};
</script>


<style lang="less" scoped>
.vertical:not(.el-menu--collapse) {
    width: 220px;

    span {
        color: #999;
    }

}

.icon {
    color: #999;
}

.title {
    margin: 0;
    // font-size: 18px;
    // font-weight: 500;
    // font-style: normal;
    text-align: center;
    background-color: #ffffff;
    padding: 15px 0 15px;
    height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 60px;

    #logo_img {
        /* border-width: 0px; */
        position: relative;
        left: 0px;
        top: 10px;
        margin-right: 10px;
        width: 32px;
        height: 32px;
    }

    #vertical_title_text {

        // position: relative;
        font-size: 18px;
        font-weight: 500;
        font-style: normal;
        color: #2984f8;
    }
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #c0c4cc;

    .expand-fold {
        font-size: 20px;
        color: #000;
    }

    .el-dropdown-link {
        font-size: 16px;
        margin-right: 40px;
    }
}


</style>
